<template>
  <view class="tab-page group">
    <view class="header">
      <text class="title">我的动态</text>
    </view>

    <view class="group-tip" v-if="momentList.length==0">
      你没有发布任何动态 ...
    </view>

    <view class="group-items" v-else>
      <scroll-view class="scroll-bar" @scrolltolower="loadMore()" scroll-with-animation="true" scroll-y="true">
        <mine-moment-list-item :moment="momentList"></mine-moment-list-item>
      </scroll-view>
    </view>
  </view>
</template>

<script>

import MomentListItem from "../../components/moment-list-item/moment-list-item.vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import http from '../../common/request';

export default {
  components: {UniIcons, MomentListItem},
  data() {
    return {
      currentCircleName: '',
      momentList: [],
      queryParams: {
        refreshing: false,
        status: 'more',
        pageNum: 1,
        pageSize: 10
      },
      hasNextPage: true,
    }
  },
  methods: {
    getList() {
      this.queryParams.status = 'loading'
      http({
        url: '/moment/mine',
        method: 'GET',
        data:this.queryParams
      }).then((res) => {
        this.momentList = res.list
        this.hasNextPage = res.hasNextPage
      })
    },

    loadMore() {
      if (!this.hasNextPage) {
        uni.showToast({
          title: `没有更多了`,
          icon: 'none',
          duration: 1500
        });
        return
      }
      this.queryParams.pageNum++
      this.queryParams.status = 'loading'
      http({
        url: '/moment/list',
        method: 'GET',
        data: this.queryParams
      }).then((res) => {
        this.momentList = this.momentList.concat(res.list)
        if (res.hasNextPage) {
          this.hasNextPage = true
        } else {
          this.hasNextPage = false
          uni.showToast({
            title: `没有更多了`,
            icon: 'none',
            duration: 1500
          });
        }
      })

    },
  },
  onLoad() {
    this.getList();
  },

}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  padding: 5px;
  background-color: #f8f8f8;
  line-height: 50px;
  font-size: 30rpx;
  letter-spacing: 2rpx; /* 字母间距 */
  font-weight: 600;
  border: #dddddd solid 1px;

  .btn-side {
    position: absolute;
    line-height: 60rpx;
    font-size: 28rpx;
    cursor: pointer;

    &.right {
      right: 30rpx;
    }
  }
}

.btn-side {
  position: absolute;
  line-height: 60rpx;
  font-size: 28rpx;
  cursor: pointer;

  &.left {
    left: 30rpx;
  }

  &.right {
    right: 30rpx;
  }
}

.group {
  position: relative;
  display: flex;
  flex-direction: column;

  .nav-bar {
    margin: 5rpx;
    display: flex;
    align-items: center;
    background-color: white;
  }

  .nav-search {
    flex: 1;
    display: flex; /* 让 .nav-search 也成为一个 flex 容器 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
  }

  .nav-add {
    padding-right: 20rpx;
    line-height: 36px;
    cursor: pointer;
  }

  .group-tip {
    position: absolute;
    top: 400rpx;
    padding: 50rpx;
    text-align: left;
    line-height: 50rpx;
    color: #10AEFF;
    font-size: 30rpx;
  }

  .group-items {
    flex: 1;
    padding: 0;
    overflow: hidden;
    position: relative;
    background-color: white;

    .scroll-bar {
      height: 100%;
    }
  }
}
</style>